<template>
    <div>
        <div class="banner" @click="handleShowGallary">
            <img
                 src="http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"
                 class="banner-img"
            >
            <div class="banner-info">
                <div class="banner-title">
                    {{ sightName }}
                </div>
                <div class="banner-num">
                    <span class="iconfont icon-tupian"></span>
                    <span></span>{{this.imgs.length}}
                </div>
            </div>

        </div>
        <fade-animation>
            <common-gallary
                :imgs="imgs"
                v-show="showGallary"
                @close="handleCloseSwiper"
            >

            </common-gallary>
        </fade-animation>
    </div>
</template>

<script>
    import CommonGallary from '@/common/gallary/Gallary'
    import FadeAnimation from '@/common/fade/FadeAnimation'
    export default {
        name: "Banner",
        props:['sightName','imgs'],
        components:{
            CommonGallary,FadeAnimation
        },
        methods:{
            handleShowGallary (){
                this.showGallary = true
            },
            handleCloseSwiper () {
                this.showGallary = false
            }
        },
        data () {
            return {
                showGallary:false
            }
        }
    }
</script>

<style scoped lang="stylus">
    .banner
        position:relative
        overflow:hidden
        height: 0
        padding-bottom: 55%
        .banner-img
            width: 100%
        .banner-info
            color:#fff
            display:flex
            position:absolute
            left:.2rem
            right:.2rem
            bottom:0
            top:3.3rem
            line-height:.6rem
            background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
            .banner-title
                font-size:.35rem
                flex:1
            .banner-num
                font-size:.24rem
                padding:0 .4rem
                height:.4rem
                line-height:.4rem
                border-radius:.2rem
                background: rgba(0,0,0,.3)
                color:#fff

</style>
